<template>
	<view>
		<view class="box">
			<view class="box-header" v-if="isLandscape">
				<view :class="{'box-header-l': true, 'box-header-l-landscape' : isLandscape }">
					<view class="box-header-title">自检系统V1.0</view>
					<view v-if="!isLandscape">
						<picker mode="date" @change="changeDay">
							<view class="box-header-time">
								<text style="margin:0 auto;">单日数据</text>
								<image :src="ossUrl + `/static/29.png`" mode=""></image>
							</view>
						</picker>
					</view>
					<view class="box-header-more" v-if="!isLandscape" @click="open">
						<text style="margin:0 auto;" @click="" >{{value.start_time}} 至 {{value.end_time}}</text>
						<image :src="ossUrl + `/static/29.png`" mode=""></image>
					</view>
				</view>
				<view class="box-header-l-r" @click="goBack">
					<template v-if="isLandscape">
						<image :src="ossUrl + `/static/20.png`" mode=""></image>
						退出横屏
					</template>
				</view>
			</view>
			<view class="content">
				<view class="content-l">
					<view @click="setKey(it.value)" :class="key.includes(it.value)  ? 'content-l-item-ac content-l-item' : 'content-l-item' " v-for="it in leftData">
						{{it.label}}
					</view>
				</view>
				<view class="content-r">
					<view>
						<qiun-data-charts type="mix" :opts="opts" :chartData="chartData" :ontouch="true" background="#343434" :canvas2d="true" canvasId="componentsinit"/>
					</view>
				</view>
			</view>
			<view class="select" v-if="key.includes('b')" :style="{paddingBottom: isLandscape? '30px' : ''}">
				<picker mode="selector" :range="currentList" @change="currentChange">
					<view class="footer-select">
						<view class="footer-select-line"></view>
						<view class="footer-select-tx">{{current}}</view>
						<image :src="ossUrl +  `/static/image/x1.png`" mode=""></image>
					</view>
				</picker>
				
			</view>
			
			<view class="footer" v-if="!isLandscape">
				
				<view @click="enterFullScreen">
					<image :src="ossUrl + `/static/20.png`" mode=""></image>
					横屏显示
				</view>
			</view>
		</view>
		<datePicker ref="datePickerRef" @confirm="confirm"/>
	</view>
</template>

<script>
	import {
		InformationClub,
		InformationProcessGolfData1,
		InformationTimeAxisForm
	} from '@/common/http/api.js'
	import datePicker from '@/pagesA/components/datePicker/datePicker.vue'
	export default {
		name: "echart",
		components:{
			datePicker
		},
		props: {
			isLandscape: {
				type: Boolean,
				default: () => false
			},
			value:{
				type: Object,
				default:() => {}
			}
		},
		data() {
			return {
				opts: {
					color: ["#1790FF", "#1AAF7D"],
					padding: [0, 10, 0, 15],
					enableScroll: true,
					fontColor: '#fff',
					legend: {
						position: 'top',
						padding: 20
					},
					xAxis: {
						disableGrid: true,
						gridColor: 'red',
						itemCount: 3,
						// gridType: "solid",
						// axisLine: true,
						axisLineColor: '#fff',
						fontColor: '#fff',
						titleFontColor: 'red',
						//旋转
						// rotateLabel: true,
						// rotateAngle: 45,
						scrollShow: true,
						scrollAlign: "left",
						scrollColor: "#A6A6A6",
						scrollBackgroundColor: "#EFEBEF",
						marginTop: 10,
						gridEval: 3
					},
					yAxis: {
						gridType: "solid",
						disabled: true
						// dashLength: 2,
						// disabled: false,
						// disableGrid: false,
						// gridColor: '#FFFFFF',
						// data:{
						// 	// /axisLineColor: '#343434'
						// }
					},
					extra: {
						tooltip: {
							
						}
					}
				},
				chartData:{},
				leftData: [
					
					{
						label: '杆数',
						value: 'a'
					},
					{
						label: '球杆/距离',
						value: 'b',
						color: '#0EE053'
					},
					{
						label: '上球道率',
						value: 'c'
					},
					{
						label: '上果岭率',
						value: 'd'
					},
					{
						label: '界外球',
						value: 'e'
					},
					{
						label: '下水数',
						value: 'f'
					},
					{
						label: '沙坑数',
						value: 'g'
					},
					{
						label: '切杆数',
						value: 'h'
					},
					{
						label: '推杆数',
						value: 'i'
					},
				],
				key: ['a'],
				current: '',
				currentList: []
			};
		},
		created() {
			//this.init()
		},
		mounted() {
			
		},
		methods: {
			setKey(e){
				if(this.key.includes(e) && this.key.length > 0) {
					this.key = this.key.filter(i=> i != e)
				} else {
					this.key.push(e)
				}
				this.getEchart()
			},
			open(){
				this.$refs.datePickerRef.show(this.value.start_time,this.value.end_time)
			},
			getEchart(){
				let categories = []
				let series = []
				let currentList = []
				this.list.forEach(i=>{
					categories.push(i.name)
				})
				this.key.forEach(i=>{
					let data = []
					if(i != 'b') {
						this.list.forEach(k=>{
							for(let j in k.list){
								if(j === i) {
									data.push(k.list[j] || 0)
								}
							}
						})
						series.push({
							//name: " ",
							type: "line",
							style: "curve",
							name: this.leftData.find(m=>m.value === i).label,
							data
						})
					} else {
						//查找所有的几号木
						this.list.forEach(k=>{
							for(let j in k.list){
								if(j === i) {
									//data.push(k.list[j] || 0)
									for(let l in k.list[j]){
										if(!currentList.includes(l)){
											currentList.push(l)
										}
									}
								}
							}
						})
						this.currentList = currentList
						if(this.current === '') {
							this.current = currentList[0]
						}
						console.log('this.currentList', this.currentList ,this.current)
						this.list.forEach(k=>{
							for(let j in k.list){
								if(j === i) {
									
									let state = 0
									for(let l in k.list[j]){
										if(this.current === l) {
											state = k.list[j][l] || 0
										}
									}
									data.push(state)
								}
							}
						})
						
						series.push({
							name: this.leftData.find(m=>m.value === i).label,
							data,
							type: "line",
							style: "curve",
							color:'#0EE053'
						})
					}
				})
				let res = {
					categories,
					series
				};
				this.chartData = res;
				console.log('chartData', this.chartData)
									
			},
			currentChange(e){
				console.log('e',e)
				this.current = this.currentList[e.detail.value]
				this.getEchart()
			},
			init(){
				
				uni.showLoading()
				InformationTimeAxisForm(this.value).then(res=>{
					this.list = res.data.list
					if(!(Array.isArray(res.data.list) && res.data.list.length > 0)) {
						let res = {
							categories:[],
							series:[]
						};
						this.chartData = res;
					} else {
						this.getEchart()
					}
					
					
				}).finally(e=>{
					uni.hideLoading()
				})
			},
			show(info){
				this.list = info
				if(!(Array.isArray(info) && info.length > 0)) {
					let res = {
						categories:[],
						series:[]
					};
					this.chartData = res;
				} else {
					this.getEchart()
				}
			},
			enterFullScreen() {
				uni.setStorageSync('echartInfo', this.list)
				// 动态切换横屏
				uni.navigateTo({
					url: '/pagesA/echart/echart'
				})
			},
			goBack(){
				uni.navigateBack()
			},
			changeDay(e){
				console.log('e',e,this.value)
				this.value.start_time = e.detail.value
				this.value.end_time = e.detail.value
				this.value.type = 1
				this.$emit('input',this.value)
				
				
			},
			confirm(e){
				console.log('confirm', e)
				if(Array.isArray(e) && e.length > 0) {
					this.value.start_time = e[0]
					this.value.end_time = e[e.length - 1]
					this.$emit('input',this.value)
					this.$nextTick(()=>{
						this.init()
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		background: #343434;
		
		border-bottom-left-radius: 15px;
		border-bottom-right-radius: 15px;
		.box-header {
			border-top-left-radius: 15px;
			border-top-right-radius: 15px;
			width: 100%;
			padding: 19.5px 15px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
	
			.box-header-l {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
	
				.box-header-title {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 13px;
					color: #FFFFFF;
				}
	
				.box-header-time {
	
					height: 28px;
					background: #FFFFFF;
					border-radius: 14px;
					display: flex;
					align-items: center;
					box-sizing: border-box;
					padding: 8.5px 2.5px;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 13px;
					color: #292929;
	
					image {
						width: 13px;
						height: 13px;
						margin-left: 5px;
					}
				}
	
				.box-header-more {
					min-width: 155px;
					height: 28px;
					background: #FFFFFF;
					border-radius: 14px;
					display: flex;
					align-items: center;
					box-sizing: border-box;
					padding: 8.5px 2.5px;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 13px;
					color: #292929;
	
					image {
						width: 13px;
						height: 13px;
						margin-left: 5px;
					}
				}
			}
	
			.box-header-l-landscape {
				flex: unset !important;
				&>view {
					margin-right: 20px;
				}
			}
	
			.box-header-l-r {
				display: flex;
				align-items: center;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 13px;
				color: #FFFFFF;
	
				image {
					width: 21px;
					height: 21px;
					margin-right: 5px;
				}
			}
		}
	}
	.content {
		width: 100%;
		box-sizing: border-box;
		padding: 13px;
		display: flex;
		align-items: center;
		.content-l {
			width: 70px;
			margin-right: 15px;
			.content-l-item {
				width: 100%;
				height: 25px;
				background: #585858;
				border-radius: 12px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang;
				font-weight: bold;
				font-size: 12px;
				color: #FFFFFF;
				margin-bottom: 15px;
			}
			.content-l-item:last-child {
				margin-bottom: 0;
			}
			.content-l-item-ac {
				background: #FFC619;
				color: #292929;
			}
		}
		.content-r {
			flex: 1;
			min-width: 0;
			height: 300px;
			&>view {
				width: 100%;
				height: 100%;
			}
		}
	}
	.footer {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		padding: 12px 40px 24.5px;
		box-sizing: border-box;
	
		view {
			display: flex;
			align-items: center;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 13px;
			color: #FFFFFF;
	
			image {
				width: 21px;
				height: 21px;
				margin-right: 5px;
			}
		}
	
		view:last-child {
			margin-left: 30px;
		}
		
	}
	.footer-select {
		//width: 135rpx;
		height: 28px;
		border-radius: 14px;
		border: 1px solid #FFFFFF;
		padding-left: 5px;
		display: flex;
		align-items: center;
		//margin-left: auto;
		.footer-select-line {
			width: 16px;
			height: 2px;
			background: #0EE053;
		}
		.footer-select-tx {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 11px;
			color: #FFFFFF;
			padding: 0 2.5px;
		}
		image {
			width: 13px;
			height: 13px;
		}
	}
	.select {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		padding: 24.5px 40px 0px;
		box-sizing: border-box;
	}
</style>